<template>
	<view class="page">
		<view class="searchCondition">
			<view class="item" @click="areaShow=true;pricesort=false">
				<u-icon name="arrow-down-fill" size="19" label="区域" v-if="!areaShow" labelPos="left"
					labelSize="26rpx"></u-icon>
				<u-icon name="arrow-up-fill" size="19" label="区域" labelPos="left" labelSize="26rpx" v-else
					customStyle="color:#007A69" labelColor="#007A69"></u-icon>
			</view>
			<view class="item" @click="pricesort=true;areaShow=false">
				<u-icon name="arrow-down-fill" v-if="!pricesort" size="19" label="价格" labelPos="left"
					labelSize="26rpx"></u-icon>
				<u-icon name="arrow-up-fill" size="19" label="价格" labelPos="left" labelSize="26rpx" v-else
					customStyle="color:#007A69" labelColor="#007A69"></u-icon>
			</view>
			<view class="item" @click="(!areaShow&&!pricesort)?sortNum():''">
				<u-icon name="arrow-down-fill" v-if="!disNum" size="19" label="销量" labelPos="left"
					labelSize="26rpx"></u-icon>
				<u-icon name="arrow-up-fill" size="19" label="销量" labelPos="left" labelSize="26rpx" v-else
					customStyle="color:#007A69" labelColor="#007A69"></u-icon>
			</view>
		</view>
		<!--  区域筛选 -->
		<view class="contentArea" v-show="areaShow">
			<view class="box">
				<view class="item" v-for="(item, index) in area" :key="index" @click="clickareaShow(item, index)">
					<view class="contentpeice" :class="{'Doublactive': item.checked}">
						{{item.scenicName}}
						<view class="xuanzhong" v-if="item.checked">
							<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
								alt="">
						</view>
					</view>
				</view>
			</view>
			<view class="u-btn">
				<view @click="resetArea">
					重置
				</view>
				<view @click="confirmArea">
					确定
				</view>
			</view>
		</view>
		<!--  价格筛选 -->
		<view class="contentArea" v-show="pricesort" style="padding-top:24rpx;">
			<view style="padding: 0 10rpx 10rpx;">
				<slide-range ref="slideRange" :scale="{interval:1500}" min="0" max="1500" :key="update" height="8"
					@change="changeSlide" :value="slideVal" :activeStyle="{'background':'#007A69'}"
					:backgroundStyle="{'background':'#EFEFEF'}">
					<template #firstBlock>
						<image class="block-image"
							src="https://i.ringzle.com/file/20240407/317a2774538f432cacc768c0b257b73b.png">
						</image>
		
					</template>
					<template #secondBlock>
						<image class="block-image"
							src="https://i.ringzle.com/file/20240407/317a2774538f432cacc768c0b257b73b.png">
						</image>
					</template>
				</slide-range>
			</view>
			<view class="box">
				<view class="item" v-for="(item, index) in prices" :key="index" @click="clickPriceShow(item)"
					:class="priceId==item.id?'on':''">
					<view class="contentpeice">
						<text v-if="!item.priceStart">{{item.priceEnd}}</text>
						<text v-if="!item.priceEnd">{{item.priceStart}}</text>
						<text v-if="item.priceStart&&item.priceEnd">{{item.priceStart}}-{{item.priceEnd}}</text>
						<view class="xuanzhong" v-if="priceId==item.id">
							<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
								alt="">
						</view>
					</view>
				</view>
			</view>
			<view class="u-btn">
				<view @click="reset">
					重置
				</view>
				<view @click="confirmArea">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import slideRange from "@/components/tianzai-slider-range/index.vue"
	export default {
		components: {
			slideRange
		},
		data(){
			return {
				areaShow: false,
				pricesort: 0, //1降序 2升序 0随机
				disNum: 0,
				area: [{
					scenicName: '全部'
				}],
				scenicName: '',
				priceId: null,
				startPrice: '',
				endPrice: '',
				slideVal: [100, 300],
				prices: [{
						id: 0,
						priceStart: '不限',
						priceEnd: null,
					},
					{
						id: 1,
						priceStart: '0',
						priceEnd: '150',
					},
					{
						id: 2,
						priceStart: '150',
						priceEnd: '200',
					},
					{
						id: 3,
						priceStart: '200',
						priceEnd: '250',
					},
					{
						id: 4,
						priceStart: '250',
						priceEnd: '650',
					},
					{
						id: 5,
						priceStart: '650',
						priceEnd: '1050',
					},
					{
						id: 6,
						priceStart: '1050',
						priceEnd: '1500',
					},
					{
						id: 7,
						priceStart: null,
						priceEnd: '1500以上',
					},
				],
			}
		},
		created() {
			this.getAddressList();
		},
		methods:{
			initReset(){
				this.areaShow = false;
				this.pricesort = 0;
				this.disNum = 0;
				this.startPrice = '';
				this.endPrice = '';
				this.slideVal = [100, 300];
				this.priceId = null;
				this.area.forEach((item, index) => {
					this.$set(this.area[index], 'checked', false)
				})
				this.scenicName = '';
			},
			getAddressList() {
				this.$api.get("/api/hotel/selectScenicList").then((res) => {
					res.data.data.forEach(item => {
						this.area.push(
							item
						)
					})
					this.area.forEach((item, index) => {
						this.$set(this.area[index], 'checked', false)
					})
				});
			},
			//销量排序
			sortNum() {
				this.disNum = !this.disNum;
				let type = this.disNum;
				this.$emit('toSort',type);
			},
			// 区域筛选
			clickareaShow(e, i) {
				this.$set(this.area[i], 'checked', !this.area[i].checked)
				if (i == 0) {
					this.area.forEach((item, index) => {
						if (index > 0 && this.area[i].checked) {
							this.$set(this.area[index], 'checked', false)
						}
					})
				} else {
					this.$set(this.area[0], 'checked', false)
				}
			},
			resetArea() {
				this.area.forEach((item, index) => {
					this.$set(this.area[index], 'checked', false)
				})
				this.scenicName = '';
				this.toSearch();
			},
			confirmArea() {
				let areas = this.area.map((item) => {
					if (item.checked) return item.scenicName
				})
				let newAreas = areas.filter((item) => item);
				this.scenicName = newAreas.join(',');
				if (this.scenicName == '全部') {
					this.scenicName = ''
				}
				this.toSearch();
			},
			changeSlide(e) {
				this.startPrice = e.firstValue;
				this.endPrice = e.secondValue
				
			},
			clickPriceShow(item) {
				this.priceId = item.id;
				
				if (item.id == 7) {
					this.startPrice = 1500;
					this.endPrice = 5000;
					this.slideVal = [parseFloat(1500), parseFloat(1500)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
				} else {
					this.startPrice = item.priceStart || '';
					this.endPrice = item.priceEnd || '';
					this.slideVal = [parseFloat(this.startPrice), parseFloat(this.endPrice)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
				}
			},
			reset(){
				this.priceId = null;				
				this.toSearch();
			},
			toSearch(){
				this.$emit('toSearchScene',{
					scenicName: this.scenicName,
					startPrice: this.startPrice,
					endPrice: this.endPrice
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		.searchCondition {
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			padding: 22rpx 0;
		
			.item {
				margin: 0 40rpx;
		
				&>view {
					display: flex;
					line-height: 37rpx;
					align-items: center;
					position: relative;
		
					text {
						font-size: 26rpx;
						color: #666;
					}
		
					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
		
				.u-icon {
					justify-content: center;
				}
			}
		}
		
		.Doublactive {
			background-color: #F0F7F6 !important;
			color: #007A69 !important;
			border: 1px solid #007A69 !important;
			border-radius: 12rpx;
		}
		
		.contentArea {
			width: 100%;
			padding: 48rpx 24rpx;
			box-sizing: border-box;
			position: relative;
			border-top: 1rpx solid #fefefe;
			background-color: #fff;
		
			.block-image {
				width: 48rpx;
				height: 48rpx;
			}
		
			.box {
				display: grid;
				gap: 20rpx 12rpx;
				grid-template-columns: repeat(4, 1fr);
		
				.item {
					width: 166rpx;
					height: 68rpx;
					text-align: center;
					line-height: 68rpx;
					background-color: #F7F7FA;
					border: 2rpx solid #F7F7FA;
					color: #333;
					box-sizing: border-box;
					position: relative;
					border-radius: 12rpx;
					
					&>view{
						position: relative;
					}
					&.on {
						border: 2rpx solid #007A69;
						color: #007A69;
					}
		
					.xuanzhong {
						width: 30rpx;
						height: 25rpx;
						position: absolute;
						bottom: 0rpx;
						right: 0rpx;
						border-top-left-radius: 10rpx;
						background: #007A69;
						display: flex;
						align-items: center;
						justify-content: center;
		
						img {
							width: 16rpx;
							height: 16rpx;
						}
					}
				}
		
			}
		
			.u-btn {
				display: flex;
				justify-content: space-between;
				gap: 0 30rpx;
				margin-top: 128rpx;
		
				view {
					width: 330rpx;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					border-radius: 44rpx;
					font-size: 30rpx;
		
					&:first-child {
						border: 1rpx solid #007A69;
						color: #007A69;
					}
		
					&:last-child {
						color: #fff;
						background: #007A69;
					}
				}
			}
		}
	}
</style>